/**
 * The MIT License (MIT)
 * 瀑布流布局+滚屏
 * @author 透笔度
 * @开源中国 https://my.oschina.net/tbd/blog
 * @码云 https://gitee.com/dgx
 */

const towxImg = require('../../../utils/towxImg');
// pages/gunping/gunping.js
Page({
  wfgdTimer: null,
  /**
   * 页面的初始数据
   */
  data: {
    realkeyWords: [],
    contleft: 0,
    contmaxwidth: 0,
    article: ""
  },
  /*瀑布流布局+滚屏*/
  seamless(keyWords) {
    let that = this;
    //372rpx  三行每一行的top
    var row = [0, 124, 248];
    var margin = 30;//30rpx 项目的left间距
    var fontsize = 36;//36rpx 字体大小用来计算宽度

    var arrswidth = [0, 0, 0];//三行每一项的宽度值
    var realkeyWords = [//计算好的可用数组
      // {val:"我去局,输",top:0,left:0}
    ];
    //刷新间隔(单位：ms)
    var interval = 30;
    //瀑布流计算
    //xxxrpx*设备宽度/750
    wx.getSystemInfo({
      success: function (res) {
        row = [0 * res.windowWidth / 750, 124 * res.windowWidth / 750, 248 * res.windowWidth / 750];
        margin = 30 * res.windowWidth / 750;
        fontsize = 36 * res.windowWidth / 750;
        for (var i = 0; i < 3; i++) {
          realkeyWords.push({ val: keyWords[i], top: row[i], left: margin, width: (keyWords[i].length + 2) * fontsize });
          arrswidth[i] = margin + (keyWords[i].length + 2) * fontsize;
        };
        for (var i = 3; i < keyWords.length; i++) {
          var minval = Math.min.apply(null, arrswidth);
          var minindex = 0;
          for (var j = 0; j < arrswidth.length; j++) {
            if (minval == arrswidth[j]) {
              minindex = j;
              break;
            };
          };
          var str = keyWords[i];
          realkeyWords.push({
            val: str, top: row[minindex], left: margin + minval, width: (str.length + 2) * fontsize
          });
          arrswidth[minindex] = arrswidth[minindex] + margin + (str.length + 2) * fontsize;
        };

        var contmaxwidth = Math.ceil(Math.max.apply(null, arrswidth));
        console.log("item值", realkeyWords, "最大宽度", contmaxwidth);
        that.setData({
          realkeyWords: realkeyWords,
          contmaxwidth: contmaxwidth
        });
        that.wfgdTimer = setInterval(function () {
          if (that.data.contleft <= -contmaxwidth) {
            that.setData({
              contleft: 0
            });
          } else {
            that.setData({
              contleft: that.data.contleft - 1
            });
          };
        }, interval);
        //e
      }
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //瀑布流布局 + 滚屏 * /
    this.seamless([
      "你很好的啊啊",
      "就是很厉害",
      "加油",
      "不错的",
      "我真的不知道什么",
      "七龙珠",
      "大魔王来了",
      "为新的小程序",
      "你很好吗",
      "和",
      "嘎嘎嘎个",
      "加油吧",
      "什么的藕粉色",
      "啊啊大大大",
      "啊大大",
      "十大撒大大大的",
      "蝶粉蜂黄或或或",
      "试试",
      "发广告",
      "哒哒哒哒"
    ]);

    let code = '```\n<view class="container my-page">\n  <view>瀑布流布局+滚屏</view>\n  <!--滚动区域-->\n  <view class="keyWord-box">\n    <view class="keyWord-list" style="width:{{contmaxwidth*2}}px;left:{{contleft}}px;">\n      <view class="keyWord-list-cont" style="width:{{contmaxwidth}}px;">\n        <view class="keyWord-list-cont-item" wx:for="{{realkeyWords}}" wx:key="unique" style="left:{{item.left}}px;top:{{item.top}}px;width:{{item.width}}px;" bindtap="selectKeyword" data-key="{{item.val}}">{{item.val}}</view>\n      </view>\n      <view class="keyWord-list-cont" style="width:{{contmaxwidth}}px;">\n        <view class="keyWord-list-cont-item" wx:for="{{realkeyWords}}" wx:key="unique" style="left:{{item.left}}px;top:{{item.top}}px;width:{{item.width}}px;" data-key="{{item.val}}" bindtap="selectKeyword">{{item.val}}</view>\n      </view>\n    </view>\n  </view>\n</view>\n```\n\n```\n.container .keyWord-box {\n  width: 750rpx;\n  height: 372rpx;\n  margin-top: 24rpx ;\n  overflow: hidden;\n  position: relative;\n}\n.container .keyWord-box .keyWord-list {\n  position: absolute;\n  top: 0;\n  height: 372rpx;\n}\n.container .keyWord-box .keyWord-list .keyWord-list-cont {\n  float: left;\n  height: 372rpx;\n  position: relative;\n}\n.container .keyWord-box .keyWord-list .keyWord-list-cont .keyWord-list-cont-item {\n  position: absolute;\n  background: #F4F4F4;\n  border-radius: 100rpx;\n  text-align: center;\n  height: 94rpx;\n  line-height: 94rpx;\n  font-size: 36rpx;\n  color: #999999;\n}\n```\n\n```\nPage({\n  /**\n   * 页面的初始数据\n   */\n  data: {\n    realkeyWords: [],\n    contleft: 0,\n    contmaxwidth: 0\n  },\n  /*瀑布流布局+滚屏*/\n  seamless(keyWords) {\n    let that = this;\n    //372rpx  三行每一行的top\n    var row = [0, 124, 248];\n    var margin = 30;//30rpx 项目的left间距\n    var fontsize = 36;//36rpx 字体大小用来计算宽度\n    var arrswidth = [0, 0, 0];//三行每一项的宽度值\n    var realkeyWords = [//计算好的可用数组\n      // {val:"我去局,输",top:0,left:0}\n    ];\n    //刷新间隔(单位：ms)\n    var interval = 30;\n    //瀑布流计算\n    //xxxrpx*设备宽度/750\n    wx.getSystemInfo({\n      success: function (res) {\n        row = [0 * res.windowWidth / 750, 124 * res.windowWidth / 750, 248 * res.windowWidth / 750];\n        margin = 30 * res.windowWidth / 750;\n        fontsize = 36 * res.windowWidth / 750;\n        for (var i = 0; i < 3; i++) {\n          realkeyWords.push({ val: keyWords[i], top: row[i], left: margin, width: (keyWords[i].length + 2) * fontsize });\n          arrswidth[i] = margin + (keyWords[i].length + 2) * fontsize;\n        };\n        for (var i = 3; i < keyWords.length; i++) {\n          var minval = Math.min.apply(null, arrswidth);\n          var minindex = 0;\n          for (var j = 0; j < arrswidth.length; j++) {\n            if (minval == arrswidth[j]) {\n              minindex = j;\n              break;\n            };\n          };\n          var str = keyWords[i];\n          realkeyWords.push({\n            val: str, top: row[minindex], left: margin + minval, width: (str.length + 2) * fontsize\n          });\n          arrswidth[minindex] = arrswidth[minindex] + margin + (str.length + 2) * fontsize;\n        };\n        var contmaxwidth = Math.ceil(Math.max.apply(null, arrswidth));\n        console.log("item值", realkeyWords, "最大宽度", contmaxwidth);\n        that.setData({\n          realkeyWords: realkeyWords,\n          contmaxwidth: contmaxwidth\n        });\n        that.wfgdTimer = setInterval(function () {\n          if (that.data.contleft <= -contmaxwidth) {\n            that.setData({\n              contleft: 0\n            });\n          } else {\n            that.setData({\n              contleft: that.data.contleft - 1\n            });\n          };\n        }, interval);\n        //e\n      }\n    });\n  },\n  /**\n   * 生命周期函数--监听页面加载\n   */\n  onLoad: function (options) {\n    //瀑布流布局 + 滚屏 * /\n    this.seamless([\n      "你很好的啊啊",\n      "就是很厉害",\n      "加油",\n      "不错的",\n      "我真的不知道什么",\n      "七龙珠",\n      "大魔王来了",\n      "为新的小程序",\n      "你很好吗",\n      "和",\n      "嘎嘎嘎个",\n      "加油吧",\n      "什么的藕粉色",\n      "啊啊大大大",\n      "啊大大",\n      "十大撒大大大的",\n      "蝶粉蜂黄或或或",\n      "试试",\n      "发广告",\n      "哒哒哒哒"\n    ]);\n  },\n})\n```\n';

    let article = towxImg.dealWithRichText(code);
    this.setData({ article });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    clearInterval(this.wfgdTimer);
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})